<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:include="include/head::commonHeaderCustom('修改密码',~{::style})">
    <style>
        body{
            min-height: auto;
            overflow: auto;
        }
        .form-horizontal>div{
            margin-top: 12px;
        }
        .control-label{
            font-weight: normal;
            color: #333;
        }
        .repwdmain label input{
            width:180px;
        }
        .repwdmain div span{
            width: 60px;
            height: 20px;
            display: inline-block;
            border: 1px solid #a9a9a9;
            border-left: none;
            color:#fff;
            border-right:none;
            text-align:center;
        }
        .repwdmain div span:nth-of-type(1){
            border-left: 1px solid #a9a9a9;
        }
        .repwdmain div span:nth-last-of-type(1){
            border-right: 1px solid #a9a9a9;
        }
        .errorMessage,.actionMessage{
            list-style:none;
        }
        .errorMessage li span,.actionMessage li span{
            border: none;
            color: red;
            display: block;
            width: 100%;
            text-align: left;
        }
        .errorMessage li span:nth-of-type(1),.actionMessage li span:nth-of-type(1){
            border:none;
        }
    </style>
</head>
<body>
    <div class="repasswordmain">
        <div id="content" class="col-sm-12 repwdmain" style="width: 99%;">
            <div class="row">
                <form class="form-horizontal" action="/reset/password" method="post" onsubmit="return checkForm();">
                    <div>
                        <label class="col-sm-3 control-label">原密码：</label>
                        <div class="col-sm-3">
                            <input type="password" name="oldPwd" class="form-control oldpwd" maxlength="20"/>
                        </div>
                    </div>
                    <div>
                        <label class="col-sm-3 control-label">新密码：</label>
                        <div class="col-sm-3">
                            <input type="password" class="newpwd form-control newpwd" name="newPwd" maxlength="20"/>
                        </div>
                    </div>
                    <div>
                        <label class="col-sm-3 control-label">确认密码：</label>
                        <div class="col-sm-3">
                            <input type="password" name="surePwd" class="form-control surepwd" maxlength="20"/>
                        </div>
                    </div>
                    <div>
                        <label class="col-sm-3 control-label">密码强度：</label>
                        <div class="col-sm-3" style="font-size: 0;display: inline-block;vertical-align: text-bottom;">
                            <span class="low" style="border-radius:8px 0 0 8px;">弱</span>
                            <span class="middle">中</span>
                            <span class="heigh" style="border-radius:0 8px 8px 0;">强</span>
                        </div>
                    </div>
                    <div>
                        <div class=" col-sm-3"> </div>
                        <div class=" col-sm-4"><p class="error" style="color:red;" th:text="${errMsg}"></p><input class="status" type="hidden" th:value="${status}"/></div>
                    </div>
                    <div>
                        <div class="col-sm-10" style="text-align: center"><button type="submit" class="btn btn-primary "> 确 定 </button></div>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <div th:include="include/onload_js::onloadJSCustom(~{::script})">
        <script>
            if ($('.status').val() > 0) {
                top.layer.closeAll()
            }
            function validInput(){
                var num =/\d/;
                var letter = /[a-zA-Z]/;
                var special = /[@_]/;
                var level = 0;
                var level1 = 0;
                var level2 = 0;
                var level3 = 0;
                var newpwd = $('.newpwd').val();
                if(newpwd.length>=6&&newpwd.length<=20){
                    $('.error').fadeOut('fast');
                    if(num.test(newpwd)){
                        $('.low').css('background','red');
                        level1 = 1;
                    }else{
                        level1 = 0;
                    }

                    if(letter.test(newpwd)){
                        level2 = 1;

                    }else{
                        level2 = 0;
                    }

                    if(special.test(newpwd)){
                        level3 = 1;
                    }else{
                        level3 = 0;
                    }
                }else{
                    level1 = 0;
                    level2 = 0;
                    level3 = 0;
                    $('.error').next('ul').remove();
                    $('.error').text('密码应大于6位，小于20位')
                    $('.error').fadeIn();
                }
                level = level1+level2+level3
                console.log(level)
                if(level==0){
                    $('.error').text('密码只包含数字，字母，@_的任意6-20位的组合');
                    $('.error').fadeIn();
                    $('.low').css('background','#fff');
                    $('.middle').css('background','#fff');
                    $('.heigh').css('background','#fff');
                }else if(level==1){
                    $('.low').css('background','#ff6363');
                    $('.middle').css('background','#fff');
                    $('.heigh').css('background','#fff');
                }else if(level==2){
                    $('.low').css('background','#ff6363');
                    $('.middle').css('background','#ffd141');
                    $('.heigh').css('background','#fff');
                }else if(level>2){
                    $('.low').css('background','#ff6363');
                    $('.middle').css('background','#ffd141');
                    $('.heigh').css('background','#8beb54');
                }
            }
            $(function(){
                $('.newpwd').on('input',function(){
                    validInput();
                })
            });
            function checkForm(){
                var bl=true;
                $('.error').next('ul').remove();
                var num =/^[\da-zA-Z@_]{6,20}$/;
                var oldpwd = $('.oldpwd').val();
                var newpwd = $('.newpwd').val();
                var surepwd = $('.surepwd').val();
                if(!num.test(oldpwd)||oldpwd==''){
                    bl=false;
                    $('.error').text('旧密码只包含数字，字母，@_的任意6-20位的组合');
                    $('.error').fadeIn();
                    return bl;
                }
                if(num.test(newpwd)){
                    if(newpwd==oldpwd){
                        bl=false;
                        $('.error').text('原始密码与新密码不能一致');
                        $('.error').fadeIn();
                        return bl;
                    }
                    if(newpwd!=surepwd){
                        bl=false;
                        $('.error').text('两次输入的密码不一致');
                        $('.error').fadeIn();
                        return bl;
                    }
                }else{
                    bl=false;
                    $('.error').text('新密码只包含数字，字母，@_的任意6-20位的组合');
                    $('.error').fadeIn();
                    return bl;
                }

                return bl;
            }

        </script>
    </div>
</body>
</html>